<template>
  <div class="blogger">
      <div class="blog_img">
        <div>桀&nbsp;&nbsp;&nbsp;&nbsp;骜</div>
          <img src="../assets/bloger.png" alt="帅气的博主">
      </div>
      <div class="blog_cont">
          <p>
              <a href="https://baike.baidu.com/item/%E6%A1%80%E9%AA%9C/2837?fr=aladdin">桀骜</a>是一个汉语词汇。读音为jié ào，比喻一个人性情倔强，不被驯顺，出自《汉书·匈奴传赞》。唐陆龟蒙《蠹化》等也有相关记载。唐陆龟蒙《蠹化》：“人或振触之，輙奋角而怒，气色桀骜。”
          </p>
          <p>
            一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。有时还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
            绝对定位和相对定位的一些区别：在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。其实对于定位的主要问题是要记住每个定位的意义。相对定位是“相对于“元素在文档流中初始位置的，而绝对定位是”相对于“最近的已经定位的祖先元素。
          </p>
          <p>
            当设定position: relative
            设置该属性后，对象会保持在常规文档流中，但位置会根据前一个对象进行一定的偏移。
            则参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间(z-index)。因此，移动元素会导致它覆盖其他框
          </p>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.blogger{
  position: relative;
  height: 800px;
}
.blog_img{
  position: absolute;
  left: 50%;
  top:8px;
  margin-left: -90px;
  width: 180px;
  height: 260px;
  overflow: hidden;
  border-radius: 3px;
}
.blog_img div{
  font-size: 20px;
  font-weight: 600;
  padding: 12px 0;
}
.blog_img img{
  width: 100%;
  height: 100%;
}
.blog_cont{
  width: 80%;
  position: absolute;
  text-align: left;
  top: 320px;
  left: 50%;
  margin-left: -40%;
  
}
.blog_cont > p{
  margin-bottom: 16px;
  line-height: 1.5em;
  text-indent: 2.1em;
  font-size: 16px;
}
</style>